<template>
    <div 
      v-if="props.enable"
      :style="'transform: translate('+props.x+'px, '+props.y+'px);width:'+props.width+'px;height:'+props.height+'px'"
      class="voice-input center"
    >
      <img 
        :src="props.iconUrl.indexOf('http')>-1?props.iconUrl:origin+props.iconUrl" 
        alt="语音输入"
        style="width: 100%; height: 100%; object-fit: contain;"
      />
    </div>
  </template>
  
<script setup >
  import { ref,onMounted,defineEmits,getCurrentInstance } from 'vue'
  const {appContext: {config: {globalProperties}}} = getCurrentInstance();

  const internalInstance = getCurrentInstance()
  const origin = internalInstance.appContext.config.globalProperties.origin
  const props = defineProps({
    enable: {
      type: Boolean,
      default: true
    },
    x: {
      type: String,
      default: '20'
    },
    y: {
      type: String,
      default: '80'
    },
    width: {
      type: String,
      default: '60'
    },
    height: {
      type: String,
      default: '60'
    },
    zindex: {
      type: Number,
      default: 10
    },
    iconUrl: {
      type: String,
      default: '/aihumanEdit/UIasset/image/voice.png'
    }
  })
  </script>
  
  <script>
  export default {
    name: 'VoiceInput'
  }
  </script>
  
  <style scoped>
  .voice-input {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  </style>